<!-- 
@name: 首页
-->
<template>
	<div id="home" class="page">
		<van-skeleton title :row="3" :loading="loading">
			<div class="searchWrap flex-row">
				<img src="../assets/images/logo.jpg" alt="">
				<div @click="$router.push('/home/search')">

					<van-search class="searchBar" disabled v-model="value" placeholder="搜索商品" />
				</div>
			</div>
			<div class='content-wrap ' v-if="contentList.length">
				<div class='diy-area' v-for="(item,index) in contentList" :key="index">
					<!-- 顶部轮播 -->
					<div class='banner' v-if="item.typeName =='顶部轮播'">
						<div v-if="item.form.show">
							<van-swipe height="213px" autoplay="5000" indicator-color="white">
								<van-swipe-item v-for="(item,index) in item.form.imgList" :key="index" @click="goLink(item.link)">
									<img class='bannerImg' :src="item.urlList[0]?item.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
								</van-swipe-item>
							</van-swipe>
						</div>

					</div>
					<!-- 顶部轮播 end -->
					<!-- 功能区 -->
					<div v-if="item.typeName =='功能区'">

						<!-- 图标大于大于8个 -->
						<div class='iconWrap2 flex-column'>
							<div class="flex-between">
								<div class='item' v-if="iconIndex <5" @click="goLink(iconItem.link,iconItem.urlType)" v-for="(iconItem,iconIndex) in item.form.imgList" :key="iconIndex">
									<img class='iconImg' :src="iconItem.urlList[0]?iconItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>

									<div v-if="iconItem.urlType=='MINIAPP'">
										<wx-open-launch-weapp id="launch-btn" :username="iconItem.link" path="" style="position: absolute; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3">
											<script type="text/wxtag-template">
												<div style="position: absolute; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3;" />
										</script>
										</wx-open-launch-weapp>
									</div>
									<div>{{iconItem.title}}</div>
								</div>
							</div>
							<div class="flex-between">
								<div class='item' v-if="iconIndex >= 5" @click="goLink(iconItem.link,iconItem.urlType)" v-for="(iconItem,iconIndex) in item.form.imgList" :key="iconIndex">
									<img class='iconImg' :src="iconItem.urlList[0]?iconItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									<div v-if="iconItem.urlType=='MINIAPP'">
										<wx-open-launch-weapp id="launch-btn" :username="iconItem.link" path="" style="position: absolute; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3">
											<script type="text/wxtag-template">
												<div style="position: absolute; top: 0, left: 0;bottom:0;right:0;width: 100%;height: 100%; opacity: 0.3;" />
										</script>
										</wx-open-launch-weapp>
									</div>
									<div>{{iconItem.title}}</div>
								</div>
							</div>

						</div>
						<!-- 图标大于小于等于8个 -->
						<!-- <div class='iconWrap flex-column' v-if="item.form.show&&item.form.imgList.length<=8">
							<div class="flex-between">
								<div class='item' v-if="iconIndex <4" @click="goLink(iconItem.link)" v-for="(iconItem,iconIndex) in item.form.imgList" :key="iconIndex">
									<img class='iconImg' :src="iconItem.urlList[0]?iconItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									<div>{{iconItem.title}}</div>
								</div>
							</div>
							<div class="flex-between">
								<div class='item' v-if="iconIndex >= 4" @click="goLink(iconItem.link)" v-for="(iconItem,iconIndex) in item.form.imgList" :key="iconIndex">
									<img class='iconImg' :src="iconItem.urlList[0]?iconItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									<div>{{iconItem.title}}</div>
								</div>
							</div>

						</div> -->

					</div>
					<!-- 功能区 end -->
					<!-- 广告位 -->
					<div v-if="item.typeName =='广告位'">
						<div class='centerBanner' v-if="item.form.show">
							<div v-if="item.form.type == 1">
								<van-swipe height="150px">
									<van-swipe-item @click="goLink(imgListItem.link)" v-for="(imgListItem,imgListIndex) in item.form.imgList" :key="imgListIndex">
										<img object-fit="fill" style=" height: 150px" :src="imgListItem.urlList[0]?imgListItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									</van-swipe-item>
								</van-swipe>
							</div>
							<div v-if="item.form.type == 2">
								<div class="type2">
									<div @click="goLink(imgListItem.link)" v-for="(imgListItem,imgListIndex) in item.form.imgList" :key="imgListIndex">
										<img object-fit="fill" style=" height: 150px" :src="imgListItem.urlList[0]?imgListItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									</div>
								</div>
							</div>
							<div v-if="item.form.type == 3">
								<div class="type3">
									<img object-fit="fill" style=" height: 150px" @click="goLink(item.form.imgList[0].link)" :src="item.form.imgList[0].urlList[0]?item.form.imgList[0].urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									<div class="type3_item">
										<div>
											<img object-fit="fill" style=" height: 70px;width:100%;margin-bottom:6px" @click="goLink(item.form.imgList[1].link)" :src="item.form.imgList[1].urlList[0]?item.form.imgList[1].urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
										</div>
										<div>
											<img object-fit="fill" style=" height: 70px;width:100%" @click="goLink(item.form.imgList[2].link)" :src="item.form.imgList[2].urlList[0]?item.form.imgList[2].urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
										</div>
									</div>
								</div>
							</div>
							<div v-if="item.form.type == 4">
								<div class="type4">
									<div @click="goLink(imgListItem.link)" v-for="(imgListItem,imgListIndex) in item.form.imgList" :key="imgListIndex">
										<img object-fit="fill" style=" height: 74px" :src="imgListItem.urlList[0]?imgListItem.urlList[0].url:require('@/assets/images/no-pic.jpg')"></img>
									</div>
								</div>
							</div>
						</div>

						<div class="br"></div>
					</div>
					<!-- 广告位 end -->
					<!-- 活动专区 -->
					<div v-if="item.typeName =='活动专区'">
						<div class='activity' v-if="item.form.show">
							<div class="flex-between">
								<div class="text1">{{item.form.modulName}}</div>
								<div class="text2" @click="$router.push('/coupon/home')">更多
									<van-icon name="arrow" />
								</div>
							</div>
							<div v-if="item.form.type == 1" class="type1 flex-row">
								<div class="item" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in item.form.goodsDetailList" :key="goodsIndex">
									<img object-fit="fill" :src="goodsItem.photo.length?goodsItem.photo[0]:''"></img>
									<div class="text3">{{goodsItem.name}}</div>
									<!-- <div style="height:0.32rem;margin-top: 0.1rem;">
										<div style="margin-top: 0rem;" class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
											<div class="left">会员</div>
											<div class="right">立减{{goodsItem.vipDiscount}}元</div>
										</div>
									</div> -->
									<div class="flex-between flex-alignCenter">
										<div class="flex-row flex-alignCenter">
											<div class="text4" v-if="goodsItem.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}

											</div>
											<div class="text4 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
												<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{goodsItem.pricePv}}
											</div>
											<span class="minText">起</span>
										</div>
										<div>
											<!-- <van-button class="button" @click="goCouponDetail(goodsItem.pkey,'',goodsItem)">立即购买</van-button> -->
										</div>
									</div>
								</div>
							</div>
							<div v-if="item.form.type == 2">
								<div class="type2">
									<div class="item flex-row flex-center" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in item.form.goodsDetailList" :key="goodsIndex">
										<img object-fit="fill" :src="goodsItem.photo.length?goodsItem.photo[0]:''"></img>
										<div style="flex:1">
											<div class="text1">{{goodsItem.name}}</div>
											<div class="flex-row flex-alignCenter" style="height: 0.4rem;">
												<!-- <div class="text3">{{goodsItem.applauseRate}}%好评</div>
												<div class="text4">距您{{(goodsItem.distance/1000).toFixed(1)}}km</div>
												<div class="text4">已售{{goodsItem.xsNumTotal}}</div> -->
											</div>
											<div class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
												<div class="left">会员</div>
												<div class="right">立减{{goodsItem.vipDiscount}}元</div>
											</div>
											<div class="flex-between flex-alignCenter">

												<div class="flex-row flex-alignCenter">
													<div class="text2" v-if="goodsItem.priceAmt">
														<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
														<span class="minText2" v-if="!goodsItem.pricePv">起</span>
													</div>
													<div class="text2 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
														<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
														<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
														{{goodsItem.pricePv}}
														<span class="minText">起</span>
													</div>
												</div>
												<div>
													<van-button class="button" @click.stop="goCouponDetail(goodsItem.pkey,'',goodsItem)">立即购买</van-button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div v-if="item.form.type == 3" class="type3 flex-row">
								<div class="item" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in item.form.goodsDetailList" :key="goodsIndex">
									<div style="position: relative;">
										<img object-fit="fill" :src="goodsItem.photo.length?goodsItem.photo[0]:''"></img>
										<!-- <span class="sale">已售{{goodsItem.xsNumTotal}}</span> -->
									</div>
									<div class="text3">{{goodsItem.name}}</div>
									<div style="height:0.32rem;margin-top: 0.1rem;">
										<div style="margin-top: 0rem;" class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
											<div class="left">会员</div>
											<div class="right">立减{{goodsItem.vipDiscount}}元</div>
										</div>
									</div>
									<div class=" flex-between flex-alignCenter">
										<div class="flex-row flex-alignCenter">
											<div class="text4" v-if="goodsItem.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
												<span class="minText2" v-if="!goodsItem.pricePv">起</span>
											</div>
											<div class="text4 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
												<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{goodsItem.pricePv}}
												<span class="minText">起</span>
											</div>
										</div>
										<div class="text5" v-if="goodsItem.showType&&goodsItem.showType.indexOf('显示销量') !=-1">已售{{goodsItem.xsNumTotal}}</div>
									</div>
									<!-- <div class="flex-between flex-alignCenter">
										<div>
										</div>
										<van-button class="button" @click.stop="goCouponDetail(goodsItem.pkey,'',goodsItem)">立即购买</van-button>
									</div> -->
								</div>
							</div>
							<div v-if="item.form.type == 4" class="type4">
								<div class="item" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem, goodsIndex) in item.form.goodsDetailList" :key="goodsIndex">
									<img object-fit="fill" :src="goodsItem.showPhoto"></img>
									<div style="flex:1;	padding: 0.24rem;">
										<div class="text1">{{goodsItem.name}}</div>
										<!-- <div class="flex-row flex-alignCenter">
											<div class="text3">{{goodsItem.applauseRate}}%好评</div>
											<div class="text4">距您{{(goodsItem.distance/1000).toFixed(1)}}km</div>
											<div class="text4">已售{{goodsItem.xsNumTotal}}</div>
										</div> -->
										<div class="flex-between flex-alignCenter">
											<div style="height:0.32rem;">
												<div style="margin-top: 0rem;" class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
													<div class="left">会员</div>
													<div class="right">立减{{goodsItem.vipDiscount}}元</div>
												</div>
											</div>
											<div class="text4" v-if="goodsItem.showType&&goodsItem.showType.indexOf('显示销量') !=-1">已售{{goodsItem.xsNumTotal}}</div>

										</div>
										<div class="flex-between flex-alignCenter" style="margin-top: 0.2rem;">

											<div class="flex-row flex-alignCenter">
												<div class="text2" v-if="goodsItem.priceAmt">
													<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
													<span class="minText2" v-if="!goodsItem.pricePv">起</span>
												</div>
												<div class="text2 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
													<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
													<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
													{{goodsItem.pricePv}}
													<span class="minText">起</span>
												</div>
											</div>
											<div>
												<van-button class="button" @click.stop="goCouponDetail(goodsItem.pkey,'',goodsItem)">立即购买</van-button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div v-if="item.form.type == 5" class="type5 flex-row">
								<div class="item" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in item.form.goodsDetailList" :key="goodsIndex">
									<div style="position: relative;">
										<img object-fit="fill" :src="goodsItem.photo.length?goodsItem.photo[0]:''"></img>
										<span class="sale" v-if="goodsItem.showType&&goodsItem.showType.indexOf('显示销量') !=-1">已售{{goodsItem.xsNumTotal}}</span>
									</div>
									<div class="text3">{{goodsItem.name}}</div>
									<div style="height:0.32rem;margin-top: 0.1rem;">
										<div style="margin-top: 0rem;" class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
											<div class="left">会员</div>
											<div class="right">立减{{goodsItem.vipDiscount}}元</div>
										</div>
									</div>

									<div class="flex-row flex-alignCenter">
										<div class="text4" v-if="goodsItem.priceAmt">
											<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
											<span class="minText2" v-if="!goodsItem.pricePv">起</span>
										</div>
										<div class="text4 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
											<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
											<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
											{{goodsItem.pricePv}}
											<span class="minText">起</span>
										</div>
									</div>
									<div class="flex-between flex-alignCenter">
										<div>
										</div>
										<!-- <van-button class="button" @click.stop="goCouponDetail(goodsItem.pkey,'',goodsItem)">立即购买</van-button> -->
									</div>
								</div>
							</div>
							<div v-if="item.form.type == 6" class="type6 flex-row">
								<div class="item" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in item.form.goodsDetailList" :key="goodsIndex">
									<div style="position: relative;">
										<img :src="goodsItem.photo.length?goodsItem.photo[0]:''"></img>
										<!-- <span class="sale">已售{{goodsItem.xsNumTotal}}</span> -->
									</div>
									<div class="text3">{{goodsItem.name}}</div>
									<div style="height:0.32rem;margin-top: 0.1rem;">
										<div style="margin-top: 0rem;" class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
											<div class="left">会员</div>
											<div class="right">立减{{goodsItem.vipDiscount}}元</div>
										</div>
									</div>
									<div class=" flex-between flex-alignCenter">
										<div class="flex-row flex-alignCenter">
											<div class="text4" v-if="goodsItem.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
												<span class="minText2" v-if="!goodsItem.pricePv">起</span>
											</div>
											<div class="text4 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
												<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{goodsItem.pricePv}}
												<span class="minText">起</span>
											</div>
										</div>
										<div class="text5" v-if="goodsItem.showType&&goodsItem.showType.indexOf('显示销量') !=-1">已售{{goodsItem.xsNumTotal}}</div>
									</div>
									<!-- <div class="flex-between flex-alignCenter">
										<div>
										</div>
										<van-button class="button" @click.stop="goCouponDetail(goodsItem.pkey,'',goodsItem)">立即购买</van-button>
									</div> -->
								</div>
							</div>
						</div>

						<div class="br"></div>
					</div>
					<!-- 活动专区 end -->

				</div>

				<div class="diy-area">
					<div class="likeTitle">猜你喜欢</div>
					<div class="like">
						<div class="type1 flex-row">
							<div class="item" @click="goCouponDetail(goodsItem.pkey)" v-for="(goodsItem,goodsIndex) in bestGoods" :key="goodsIndex">
								<img object-fit="fill" :src="goodsItem.photo.length?goodsItem.photo[0]:''" />
								<div class="text3" style="width:100%">{{goodsItem.name}}</div>
								<div style="height:0.32rem;margin-top: 0.1rem;">
									<div style="margin-top: 0rem;" class="vipSuctract flex-row" v-if="goodsItem.vipDiscount">
										<div class="left">会员</div>
										<div class="right">立减{{goodsItem.vipDiscount}}元</div>
									</div>
								</div>
								<div class="flex-row flex-alignCenter">
									<div class="text4" v-if="goodsItem.priceAmt">
										<span style="font-size:0.22rem">￥</span>{{goodsItem.priceAmt}}
										<span class="minText2" v-if="!goodsItem.pricePv">起</span>
									</div>
									<div class="text4 flex-row flex-alignCenter" v-if="goodsItem.pricePv">
										<span style="margin:0 0.06rem" v-if="goodsItem.priceAmt&&goodsItem.pricePv">+</span>
										<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
										{{goodsItem.pricePv}}
										<span class="minText">起</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<van-overlay :show="show" @click="show = false">
					<div class="wrapper" @click="show = false">
						<div class="block1 bg1" v-if="popData.homePopType == 1">
							<div class="item flex-row flex-center" @click="goCouponDetail(popData.appGoodsDTO.pkey)">
								<img object-fit="fill" class="photo" :src="popData.appGoodsDTO.photo.length?popData.appGoodsDTO.photo[0]:''"></img>
								<div style="flex:1">
									<div class="text1">{{popData.appGoodsDTO.name}}</div>
									<div class="flex-between flex-alignCenter">

										<div class="flex-row flex-alignCenter">
											<div class="text2" v-if="popData.appGoodsDTO.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{popData.appGoodsDTO.priceAmt}}
												<span class="minText2" v-if="!popData.appGoodsDTO.pricePv">起</span>
											</div>
											<div class="text2 flex-row flex-alignCenter" v-if="popData.appGoodsDTO.pricePv">
												<span style="margin:0 0.06rem" v-if="popData.appGoodsDTO.priceAmt&&popData.appGoodsDTO.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{popData.appGoodsDTO.pricePv}}
												<span class="minText">起</span>
											</div>
										</div>
										<div>
											<div class="text4">{{popData.appGoodsDTO.viewCount}}人喜欢</div>
										</div>
									</div>
								</div>
							</div>
							<div class="time">
								<div class="flex-center flex-row">
									<div style="margin-right:0.2rem">活动倒计时</div>
									<van-count-down :time="time">
										<template #default="timeData">
											<span class="block">{{ timeData.days }}</span>
											<span class="colon">天</span>
											<span class="block">{{ timeData.hours }}</span>
											<span class="colon">:</span>
											<span class="block">{{ timeData.minutes }}</span>
											<span class="colon">:</span>
											<span class="block">{{ timeData.seconds }}</span>
										</template>
									</van-count-down>
								</div>
							</div>
							<div class="flex-center">
								<img object-fit="fill" @click="goCouponDetail(popData.appGoodsDTO.pkey)" class="tc11" src="@/assets/images/tc11.png"></img>
							</div>
						</div>
						<div class="block1 bg2" v-if="popData.homePopType == 2">
							<div style="margin-top:2.4rem" class="item flex-row flex-center" @click="goCouponDetail(popData.appGoodsDTO.pkey)">
								<img object-fit="fill" class="photo" :src="popData.appGoodsDTO.photo.length?popData.appGoodsDTO.photo[0]:''"></img>
								<div style="flex:1">
									<div class="text1">{{popData.appGoodsDTO.name}}</div>
									<div class="flex-between flex-alignCenter">

										<div class="flex-row flex-alignCenter">
											<div class="text2" v-if="popData.appGoodsDTO.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{popData.appGoodsDTO.priceAmt}}
												<span class="minText2" v-if="!popData.appGoodsDTO.pricePv">起</span>
											</div>
											<div class="text2 flex-row flex-alignCenter" v-if="popData.appGoodsDTO.pricePv">
												<span style="margin:0 0.06rem" v-if="popData.appGoodsDTO.priceAmt&&popData.appGoodsDTO.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{popData.appGoodsDTO.pricePv}}
												<span class="minText">起</span>
											</div>
										</div>
										<div>
											<div class="text4">{{popData.appGoodsDTO.viewCount}}人喜欢</div>
										</div>
									</div>
								</div>
							</div>
							<div class="time">
								<div class="flex-center flex-row">
									<div style="margin-right:0.2rem">活动倒计时</div>
									<van-count-down :time="time">
										<template #default="timeData">
											<span class="block2">{{ timeData.days }}</span>
											<span class="colon">天</span>
											<span class="block2">{{ timeData.hours }}</span>
											<span class="colon">:</span>
											<span class="block2">{{ timeData.minutes }}</span>
											<span class="colon">:</span>
											<span class="block2">{{ timeData.seconds }}</span>
										</template>
									</van-count-down>
								</div>
							</div>
							<div class="flex-center">
								<img style="bottom: 0.4rem;" object-fit="fill" @click="goCouponDetail(popData.appGoodsDTO.pkey)" class="tc11" src="@/assets/images/tc11.png"></img>
							</div>
						</div>
						<div class="block1 bg3" @click="goCouponDetail(popData.appGoodsDTO.pkey)" v-if="popData.homePopType == 3">
							<div style="margin-top:2.4rem" class="item flex-row flex-center" @click="goCouponDetail(popData.appGoodsDTO.pkey)">
								<img object-fit="fill" class="photo" :src="popData.appGoodsDTO.photo.length?popData.appGoodsDTO.photo[0]:''"></img>
								<div style="flex:1">
									<div class="text1">{{popData.appGoodsDTO.name}}</div>
									<div class="flex-between flex-alignCenter">

										<div class="flex-row flex-alignCenter">
											<div class="text2" v-if="popData.appGoodsDTO.priceAmt">
												<span style="font-size:0.22rem">￥</span>{{popData.appGoodsDTO.priceAmt}}
												<span class="minText2" v-if="!popData.appGoodsDTO.pricePv">起</span>
											</div>
											<div class="text2 flex-row flex-alignCenter" v-if="popData.appGoodsDTO.pricePv">
												<span style="margin:0 0.06rem" v-if="popData.appGoodsDTO.priceAmt&&popData.appGoodsDTO.pricePv">+</span>
												<img object-fit="fill" class="jf2" src="@/assets/images/jf2.png"></img>
												{{popData.appGoodsDTO.pricePv}}
												<span class="minText">起</span>
											</div>
										</div>
										<div>
											<div class="text4">{{popData.appGoodsDTO.viewCount}}人喜欢</div>
										</div>
									</div>
								</div>
							</div>
							<div class="time">
								<div class="flex-center flex-row">
									<div style="margin-right:0.2rem">活动倒计时</div>
									<van-count-down :time="time">
										<template #default="timeData">
											<span class="block2">{{ timeData.days }}</span>
											<span class="colon">天</span>
											<span class="block2">{{ timeData.hours }}</span>
											<span class="colon">:</span>
											<span class="block2">{{ timeData.minutes }}</span>
											<span class="colon">:</span>
											<span class="block2">{{ timeData.seconds }}</span>
										</template>
									</van-count-down>
								</div>
							</div>

						</div>
					</div>
				</van-overlay>
			</div>
		</van-skeleton>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			show: false,
			value: '',
			bestGoods: [],
			loading: true,
			activeName: '',
			contentList: [],
			time: 0,
			popData: {},
		};
	},

	created() {
		this.get_index();
		this.queryTj_goods();
		this.shareData();
		console.log(localStorage.getItem('homePop'));
		if (!localStorage.getItem('homePop')) {
			this.getConfig_index();
		}
	},
	methods: {
		getConfig_index() {
			var params = {};
			this.$myApi['getConfig_index'](params).then((res) => {
				if (res.code == 0) {
					if (res.result.appGoodsDTO) {
						this.popData = res.result;
						this.time =
							new Date(res.result.appGoodsDTO.endDate) -
							new Date();
						this.show = true;
						localStorage.setItem('homePop', true);
					}
				} else {
				}
			});
		},
		shareData() {
			this.$myApi['getConfig_index']().then((res) => {
				if (res.code == 0) {
					var link =
						this.$store.state.shareUrl +
						'/home?' +
						'referrer=' +
						this.$store.state.userinfo.pkey;
					var dataList = {
						title: '丰收联盟', // 分享标题
						desc:
							res.result.indexShareContent ||
							'WaWa搭子线上商城', // 分享描述
						imgUrl:
							res.result.indexSharePhoto ||
							require('../assets/images/h2.png'), // 分享图标
					};

					this.updateAppMessageShareData(dataList, link);
				} else {
				}
			});
		},
		goLink(path, urlType) {
			if (urlType == 'MINIAPP') {
				return;
			}
			if (path.indexOf('http') != -1) {
				// window.open(path)
				self.location.href = path;
			} else {
				this.$router.push(path);
			}
		},
		goCouponDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/coupon/detail',
				query: { pkey: pkey },
			});
		},
		queryTj_goods() {
			var params = {};
			this.$myApi.queryTj_goods(params).then((res) => {
				if (res.code == 0) {
					this.bestGoods = res.result;
				}
			});
		},
		get_index() {
			this.loading = true;
			var params = {
				lng: this.$store.state.lng,
				lat: this.$store.state.lat,
			};
			this.$myApi.get_index(params).then((res) => {
				if (res.code == 0) {
					this.contentList = res.result;
					this.loading = false;
				}
			});
		},
		onSubmit(values) {
			console.log('submit', values);
		},
		jump(path, name) {
			this.$router.push({ path: path, query: { topBarName: name } });
		},
	},
};
</script>
<style lang="less">
.van-overlay {
	z-index: 1002 !important;
}
#home {
	padding-left: 0rem;
	padding-right: 0rem;
	padding-top: 0;
	padding-bottom: 1.5rem;
	overflow: visible !important;
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		position: relative;
		.bg1 {
			width: 6.1rem;
			height: 5.12rem;
			background-image: url('../assets/images/tc1.png');
		}
		.bg2 {
			width: 6.1rem;
			height: 6.42rem;
			background-image: url('../assets/images/tc2.png');
		}
		.bg3 {
			width: 6.1rem;
			height: 6.02rem;
			background-image: url('../assets/images/tc3.png');
		}
		.block1 {
			background-repeat: no-repeat;
			background-position: top center;
			background-size: 100% auto;
			position: relative;

			.tc11 {
				width: 5rem;
				height: 0.84rem;
				position: absolute;
				bottom: -0.42rem;
				margin: 0 auto;
			}
			.item {
				margin-bottom: 0.2rem;
				background: #fff;
				width: 90%;
				margin: 0 auto;
				border-radius: 10px;
				padding: 0.12rem;
				margin-top: 2rem;

				.photo {
					height: 1.4rem;
					width: 1.4rem;
					margin-right: 0.2rem;
					border-radius: 10px;
				}
				.text1 {
					font-size: 0.3rem;
					font-family: PingFang SC;
					// font-weight: 600;
					// color: #000000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.text2 {
					margin-top: 0.1rem;
					font-size: 0.34rem;
					// font-family: PingFang SC;
					font-weight: 600;
					color: #d95954;
				}
				.text3 {
					background: rgba(255, 212, 49, 0.12);
					border-radius: 2px;
					font-size: 0.24rem;
					font-family: PingFang SC;
					font-weight: 600;
					color: #d95954;
					padding: 0.07rem 0.17rem;
					margin-right: 0.1rem;
				}
				.text4 {
					font-size: 0.22rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-right: 0.1rem;
				}
			}
			.time {
				font-size: 0.18rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
				margin-top: 0.4rem;
				.colon {
					display: inline-block;
					margin: 0 0.1rem;
					font-size: 0.18rem;
					color: #fff;
				}
				.block {
					background: #763084;
					font-size: 0.18rem;
					color: #fff;
					padding: 0.02rem 0.06rem;
				}
				.block2 {
					.block();
					background: #c33425;
				}
			}
		}
	}
	.jf2 {
		height: 0.18rem !important;
		width: 0.18rem !important;
		margin-right: 0.04rem !important;
		border-radius: 0 !important;
	}
	.van-swipe__indicators {
		bottom: 25px;
	}
	.van-search__content {
		border-radius: 20px;
	}
	.searchWrap {
		position: absolute;
		// top: 0.74rem;
		padding: 0.3rem;
		z-index: 1001;
		width: 100%;
		.searchBar {
			background: #ffffff;
			opacity: 0.3;
			padding: 0;
			border-radius: 20px;
			width: 6rem;
			height: 0.72rem;
		}
		img {
			height: 0.72rem;
			width: 0.72rem;
			margin-right: 0.24rem;
			border-radius: 50%;
		}
	}
	.content-wrap {
		background-color: #fafafa;
		width: 100%;
		height: auto;
		.diy-area {
			// background-color: #fff;
			position: relative;
			background-color: inherit;

			img {
				vertical-align: top;
			}

			.banner {
				.bannerImg {
					height: 4rem;
					width: 100%;
				}
			}
			.br {
				height: 0.2rem;
				width: 100%;
				background: #fafafa;
			}
			.centerBanner {
				padding: 0.24rem;
				min-height: 3rem;
				// max-height: 200px;
				position: relative;
				margin: 0 0.24rem;
				background: #fff;
				box-sizing: border-box;
				border-radius: 10px;
				img {
					// width: calc(100% - 0.7rem);
					width: 100%;
					height: 100%;
					border-radius: 0.24rem;
				}
				.type2 {
					display: grid;
					grid-template-columns: repeat(2, 48%);
					grid-gap: 4%;
					height: 100%;
				}
				.type3 {
					height: 100%;
					display: grid;
					grid-template-columns: repeat(2, 48%);
					grid-gap: 4%;

					.type3_item {
						grid-template-columns: repeat(1, 100%);
						grid-template-rows: repeat(2, 48%);
						grid-gap: 4%;
					}
				}
				.type4 {
					height: 100%;
					display: grid;
					grid-template-columns: repeat(4, 23.5%);
					grid-gap: 2%;
				}
			}
			.activity {
				padding: 0.24rem;
				// min-height: 3.84rem;
				// max-height: 200px;
				position: relative;
				margin: 0 0.24rem;
				background: #fff;
				box-sizing: border-box;
				border-radius: 10px;

				.button {
					background: #eca73b;
					border-radius: 20px;
					font-size: 0.22rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					padding: 0.1rem 0.2rem;
					height: auto;
				}
				.text1 {
					font-size: 0.35rem;
					color: #333333;
					// font-weight: 800;
					margin-bottom: 0.24rem;
				}
				.text2 {
					font-size: 0.24rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.type1::-webkit-scrollbar {
					display: none;
				}
				.type1 {
					width: 100%;
					overflow-x: scroll;
					img {
						object-fit: cover;
						height: 2rem;
						width: 2rem;
						border-radius: 10px;
					}
					.item {
						margin-right: 0.16rem;
						width: 2rem;
						.text3 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							// color: #000000;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
							margin-top: 8px;
							height: 0.7rem;
						}
						.text4 {
							// margin-top: 8px;
							font-size: 0.34rem;
							font-weight: 600;
							color: #d95954;
						}
					}
				}
				.type2::-webkit-scrollbar {
					display: none;
				}
				.type2 {
					width: 100%;
					overflow-x: scroll;
					img {
						object-fit: cover;
						height: 1.8rem;
						width: 1.8rem;
						margin-right: 0.24rem;
						border-radius: 10px;
					}
					.item {
						margin-bottom: 0.2rem;

						.text1 {
							font-size: 0.3rem;
							font-family: PingFang SC;
							// font-weight: 600;
							// color: #000000;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.text2 {
							margin-top: 0.1rem;
							font-size: 0.34rem;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
						}
						.text3 {
							background: rgba(255, 212, 49, 0.12);
							border-radius: 2px;
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
							padding: 0.07rem 0.17rem;
							margin-right: 0.1rem;
						}
						.text4 {
							font-size: 0.22rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-right: 0.1rem;
						}
					}
				}
				.type3 {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(2, 48%);
					grid-column-gap: 4%;
					grid-row-gap: 0.2rem;
					img {
						height: 3rem;
						width: 3rem;
						object-fit: cover;
						border-radius: 10px;
					}
					.item {
						margin-right: 0.16rem;
						.sale {
							position: absolute;
							bottom: 0;
							color: #fff;
							background: rgba(33, 33, 33, 0.5);
							font-size: 0.22rem;
							padding: 0.05rem;
							border-radius: 0 10px 0 0;
							left: 0;
						}

						.text3 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							// color: #000000;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
							margin-top: 8px;
							height: 0.7rem;
						}
						.text4 {
							margin-top: 0.1rem;
							font-size: 0.34rem;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
						}
						.text5 {
							margin-top: 0.1rem;
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-right: 0.1rem;
						}
					}
				}
				.type4 {
					width: 100%;
					// overflow-x: scroll;
					// height: calc(
					// 	100vh - 44px - 66px - 70px - 50px - 0.48rem - 10px
					// );
					// padding-bottom: 1rem;
					img {
						height: 3rem;
						width: 100%;
						border-radius: 10px;
						object-fit: cover;
					}
					.item {
						margin-bottom: 8px;
						background: #fff;

						border-radius: 10px;
						.text1 {
							font-size: 0.3rem;
							font-family: PingFang SC;
							// font-weight: 600;
							// color: #000000;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-bottom: 0.2rem;
						}
						.text2 {
							font-size: 0.34rem;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
						}
						.text3 {
							background: rgba(255, 212, 49, 0.12);
							border-radius: 2px;
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
							padding: 0.07rem 0.17rem;
							margin-right: 0.1rem;
						}
						.text4 {
							font-size: 0.22rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-right: 0.1rem;
						}
					}
				}
				.type5 {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(3, 30%);
					grid-gap: 5%;
					padding-bottom: 0.2rem;
					img {
						height: 2rem;
						width: 2rem;
						border-radius: 10px;
						object-fit: cover;
					}
					.item {
						margin-right: 0.16rem;
						.sale {
							position: absolute;
							bottom: 0;
							color: #fff;
							background: rgba(33, 33, 33, 0.5);
							font-size: 0.22rem;
							padding: 0.05rem;
							border-radius: 0 10px 0 0;
							left: 0;
						}

						.text3 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							// color: #000000;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
							margin-top: 8px;
							height: 0.7rem;
						}
						.text4 {
							margin-top: 0.1rem;
							font-size: 0.34rem;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
						}
					}
				}
				.type6 {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(2, 48%);
					grid-column-gap: 4%;
					grid-row-gap: 0.2rem;
					img {
						height: 1.67rem;
						width: 3rem;
						border-radius: 10px;
						object-fit: cover;
					}
					.item {
						margin-right: 0.16rem;
						.sale {
							position: absolute;
							bottom: 0;
							color: #fff;
							background: rgba(33, 33, 33, 0.5);
							font-size: 0.22rem;
							padding: 0.05rem;
							border-radius: 0 10px 0 0;
							left: 0;
						}

						.text3 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							// color: #000000;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
							margin-top: 8px;
							height: 0.7rem;
						}
						.text4 {
							margin-top: 0.1rem;
							font-size: 0.34rem;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
						}
						.text5 {
							margin-top: 0.1rem;
							font-size: 0.24rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-right: 0.1rem;
						}
					}
				}
			}
			.likeTitle {
				font-size: 0.32rem;
				font-family: PingFang SC;
				font-weight: 600;
				color: #000000;
				margin-bottom: 0.24rem;
				text-align: center;
			}
			.like {
				padding: 0.24rem;
				min-height: 3.84rem;
				// max-height: 200px;
				position: relative;
				background: #fff;
				box-sizing: border-box;
				border-radius: 10px;

				.type1 {
					width: 100%;
					// overflow-x: scroll;
					display: grid;
					grid-template-columns: repeat(2, 49%);
					grid-gap: 2%;

					img {
						height: 3.42rem;
						width: 3.42rem;
						border-radius: 10px;
					}
					.item {
						margin-right: 0.16rem;

						.text3 {
							font-size: 0.26rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: #000000;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
							margin-top: 8px;
						}
						.text4 {
							margin-top: 8px;
							font-size: 0.34rem;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #d95954;
						}
					}
				}
			}
			.iconWrap {
				position: relative;
				padding-bottom: 0.55rem;
				border-radius: 20px 20px 0 0;
				top: -0.3rem;
				// margin-top: -0.4rem;
				background-color: #fafafa;
				z-index: 999;
				// display: grid;
				// grid-template-columns: repeat(auto-fill, 25%);
				.iconImg {
					width: 0.8rem;
					height: 0.8rem;
					margin-bottom: 0.12rem;
				}
				.item {
					width: 25%;
					-webkit-box-flex: 1;
					flex: 1;
					margin-top: 0.3rem;
					font-size: 0.24rem;
					text-align: center;
				}
			}
			.iconWrap2 {
				position: relative;
				// padding-bottom: 0.55rem;
				border-radius: 20px 20px 0 0;
				top: -0.3rem;
				// margin-top: -0.4rem;
				background-color: #fafafa;
				z-index: 999;
				// display: grid;
				// grid-template-columns: repeat(auto-fill, 20%);
				.iconImg {
					width: 0.8rem;
					height: 0.8rem;
					margin-bottom: 0.12rem;
				}
				.item {
					width: 20%;
					-webkit-box-flex: 1;
					flex: 1;
					margin-top: 0.3rem;
					font-size: 0.24rem;
					text-align: center;
					position: relative;
				}
			}
		}
	}
}
</style>